<template>
  <div class="other-Container">
    <div class="other-phone">
      <div>手机号</div>
      <div>{{ Userinfo?.userName }}</div>
    </div>
    <div class="other-money">
      <div>余额</div>
      <div v-if="Userinfo?.balance">
        {{ (Userinfo?.balance / 100).toFixed(2) }} 元
      </div>
      <div v-else>0.00</div>
    </div>
    <div class="other-seat">
      <div>是否可调座位</div>
      <div>{{ info?.changeSeatStatus == 1 ? "是" : "否" }}</div>
    </div>
    <div
      class="other-pickup"
      v-if="
        info?.inputLimitPrice &&
        (radioValList.indexOf(3) !== -1 ||
          radioValList.indexOf(7) !== -1 ||
          radioValList.indexOf(8) !== -1)
      "
    >
      <div>自定义限价</div>
      <div>{{ (info?.inputLimitPrice / 100).toFixed(2) }} 元</div>
    </div>

    <div class="other-origin" v-else>
      <div>市场价</div>
      <div>{{ (info?.price / 100).toFixed(2) }} 元</div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, toRefs } from "vue";
import { useUserStore } from "../../store";
import { storeToRefs } from "pinia";
const userStore = useUserStore();
const { Userinfo } = storeToRefs(userStore);

const props = defineProps({
  info: Object,
});

onMounted(() => {
  shows();
});

const radioValList = ref([]);

const { info } = toRefs(props);

const shows = () => {
  setTimeout(() => {
    radioValList.value = [
      info.value.matchChannel,
      info.value.slaveMatchChannel,
    ];
  }, 200);
};
</script>
<style lang="scss">
.other-Container {
  display: flex;
  padding: 30px 20px;
  border-radius: 15px;

  flex-direction: column;
  background-color: #fff;

  .other-Container-seat {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;

    .title {
      font-size: 28px;
      font-weight: 700;
      color: #15181d;
    }
  }

  .other-phone {
    // margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24px;
    color: #858a99;

    .title {
    }
  }

  .other-money {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24px;
    color: #858a99;

    .title {
    }
  }

  .other-origin {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24px;
    color: #858a99;

    .title {
    }
  }

  .other-pickup {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24px;
    color: #858a99;

    .title {
    }
  }
  .other-seat {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24px;
    color: #858a99;

    .title {
    }
  }
}
</style>
